import React, { useState } from 'react';
import { CalendarOutlined, FolderOpenOutlined, FireOutlined } from '@ant-design/icons'
import { List } from 'antd'
import '../public/styles/component/list.css'
import MD from './MD'

const MyList = (props) => {
  return (
    <div className="myList">
      <List
        header={props.title}
        itemLayout="vertical"
        dataSource={props.data}
        loading={props.loading}
        renderItem={item => (
          <List.Item>
            <div className="list-title" onClick={() => { props.toDetail(item.id) }} >{item.title}</div>
            <div className="list-icon">
              <span><CalendarOutlined /> {item.addTime}</span>
              <span><FolderOpenOutlined /> {item.type}</span>
              <span><FireOutlined />{item.view_count}人</span>
            </div>
            <div className="list-context"
              dangerouslySetInnerHTML={{ __html: MD(item.introduce).html }}></div>
            <div className="list-more" onClick={() => { props.toDetail(item.id) }}>查看更多&nbsp;&nbsp;></div>
          </List.Item>
        )}
      />
    </div>
  )
}

export default MyList